<template>
  <el-container class="page-container">
    <el-main>
      <!-- 园区数据 -->
      <div id="park-data" class="white-bg">
        <div class="title">园区数据</div>
        <div id="data-container">
          <div class="data-item">
            <div class="data-name">年度累计收费（元）</div>
            <div class="data-value">{{ workbenchInfo.annualIncome }}</div>
          </div>
          <div class="data-item">
            <div class="data-name">入驻企业总数（个）</div>
            <div class="data-value">{{ workbenchInfo.enterpriseTotal }}</div>
          </div>
          <div class="data-item">
            <div class="data-name">月卡车辆总数（辆）</div>
            <div class="data-value">{{ workbenchInfo.monthCardTotal }}</div>
          </div>
          <div class="data-item">
            <div class="data-name">一体杆总数（台）</div>
            <div class="data-value">{{ workbenchInfo.chargePoleTotal }}</div>
          </div>
        </div>
      </div>
      <!-- 年度收入统计 -->
      <div id="annual-income" class="white-bg">
        <div class="title">年度收入统计</div>
        <IncomeChart v-if="workbenchInfo.annualIncomeArray" :income-data="workbenchInfo.annualIncomeArray" />
      </div>
      <!-- 临期合同提醒 -->
      <div id="expire-contract" class="white-bg">
        <div class="title">临期合同提醒</div>
        <el-table :data="contractList">
          <el-table-column type="index" label="序号" />
          <el-table-column label="企业名称" prop="enterpriseName" />
          <el-table-column label="租赁楼宇" prop="buildingName" />
          <el-table-column label="租赁时间">
            <template #default="{ row }">
              {{ row.startTime + '-' + row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" width="120">
            <template #default="{ row }">
              <el-button
                v-auth-btn="'park:rent:add_surrender'"
                type="text"
                size="medium"
                @click="onOpenRentEditor(row.enterpriseId, row)"
              >续租</el-button>
              <el-button v-auth-btn="'park:rent:add_surrender'" type="text" size="medium" @click="onOutRent(row.id)">退租</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <svg-icon class="empty-data" icon-class="empty" />
          </template>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :current-page.sync="contractparams.page"
          :page-size="10"
          layout="->, total, prev, pager, next"
          :total="contractTotal"
          @current-change="getContractList"
        />
      </div>
    </el-main>
    <el-aside>
      <!-- 快捷入口 -->
      <div id="quick-entry" class="white-bg">
        <div class="title">
          快捷入口
        </div>
        <div id="entry-container">
          <div class="entry-item">
            <div class="entry-icon">
              <img src="@/assets/add-enterprise.png" alt="">
            </div>
            <div class="entry-name">添加企业</div>
          </div>
          <div class="entry-item">
            <div class="entry-icon">
              <img src="@/assets/employee-manage.png" alt="">
            </div>
            <div class="entry-name">员工管理</div>
          </div>
          <div class="entry-item">
            <div class="entry-icon">
              <img src="@/assets/add-bill.png" alt="">
            </div>
            <div class="entry-name">添加账单</div>
          </div>
          <router-link class="entry-item" target="_blank" to="/big-screen">
            <div class="entry-icon">
              <img src="@/assets/data-screen.png" alt="">
            </div>
            <div class="entry-name">数据大屏</div>
          </router-link>
        </div>
      </div>
      <!-- 设备告警派单 -->
      <div id="device-warning" class="white-bg">
        <div class="title">
          快捷入口
        </div>
        <div class="warning-container">
          <svg-icon class="empty-data" icon-class="empty" />
          <el-button type="primary" round @click="$router.push('/rod/warning')">
            更多 <i class="el-icon-arrow-right" />
          </el-button>
        </div>
      </div>
    </el-aside>
    <RentEditor ref="rentEditorRef" @update-list="getContractList" />
  </el-container>
</template>

<script>
import IncomeChart from './components/IncomeChart'
import RentEditor from './components/RentEditor'
import { getWorkbenchInfoAPI, getContractListAPI } from '@/api/workbench'

export default {
  name: 'WorkbenchPage',
  components: {
    IncomeChart,
    RentEditor
  },
  data() {
    return {
      workbenchInfo: {}, // 工作台信息
      contractList: [], // 临期合同列表
      contractTotal: 0, // 临期合同总数
      contractparams: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    // 获取工作台信息
    this.getWorkbenchInfo()
    // 临期合同查询
    this.getContractList()
  },
  methods: {
    // 获取工作台信息
    async getWorkbenchInfo() {
      const res = await getWorkbenchInfoAPI()
      this.workbenchInfo = res
    },
    // 临期合同查询
    async getContractList() {
      const res = await getContractListAPI(this.contractparams)
      this.contractList = res.rows
      this.contractTotal = res.total
    },
    // 打开合同编辑弹窗
    onOpenRentEditor(enterpriseId, row) {
      this.$refs.rentEditorRef.open(enterpriseId, row)
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  background-color: transparent !important;
  padding: 0;
  .el-main {
    margin-right: 20px;
    padding: 0;
    #park-data {
      height: 145px;
      #data-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .data-name {
          margin-bottom: 20px;
          font-size: 14px;
          color: #888;
        }
        .data-value {
          font-size: 24px;
          font-weight: 600;
        }
      }
    }
  }
  .el-aside {
    #quick-entry {
      height: 145px;
      #entry-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .entry-icon {
          text-align: center;
          img {
            width: 45px;
            height: 45px;
            margin-bottom: 5px;
          }
        }
        .entry-name {
          font-size: 12px;
          color: #444;
        }
      }
    }
    #device-warning {
      .warning-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-button {
          width: 90%;
        }
      }
    }
  }
  .white-bg {
    background-color: #fff;
    border-radius: 2px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    margin-bottom: 20px;
  }
  .empty-data {
    width: 150px;
    height: 150px;
  }
}
</style>
